<template>
  <div class="footer">
    <div class="phone"><img src="~assets/image/common/phone.png" alt="" /></div>
    <div class="logo">
      <img src="~assets/image/common/logo@2x.png" alt="" />
    </div>
    <div class="contact">
      <div class="t">联系我们</div>
      <div class="m"><img src="~assets/image/common/qrcode1.jpg" alt=""></div>
      <div class="b">微信扫码免费咨询</div>
    </div>
    <ul class="detail">
      <li><fa class="fa" :icon="['fas', 'map-marker-alt']" />地址：香港九龍旺角上海街682號潤基商業中心6楼A14室</li>
      <li><fa class="fa" :icon="['fas', 'phone-alt']" />联系电话：136-0246-1913</li>
      <li><fa class="fa" :icon="['fas', 'envelope']" />邮箱：gzbtjk666@163.com</li>
    </ul>
    <div class="bar">
      <div>
        <div class="img"><img src="~assets/image/common/qrcode2.jpg" alt=""></div>
        <div class="text">扫码关注公众号</div>
      </div>
      <div>
        <div class="img"><img src="~assets/image/common/qrcode3.png" alt=""></div>
        <div class="text">扫码添加小程序</div>
      </div>
    </div>
  </div>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  // 创建完成（可以访问当前this实例）
  created() {},
  methods: {},
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.footer {
  width: 7.5rem;
  height: 14.12rem;
  background-color: #0c5da9;
  color: #FCFCFC;
  font-size: 0.23rem;
  border-bottom: 1.13rem solid #094278;
  padding-top: 0.57rem;
}
.phone {
  margin: 0 auto;
  width: 1.09rem;
  height: 1.09rem;
}
.logo {
  margin: 0 auto;
  width: 3.05rem;
}
.contact {
  width: 3.5rem;
  margin: 0 auto;
}
.contact .t {
  text-align: center;
  font-size: 0.33rem;
  margin-top: 0.29rem;
  margin-bottom: 0.15rem;
  line-height: 130%;
}
.contact .m img{
  width: 3.5rem;
  height: 3.5rem;
}
.contact .b {
  font-size: 0.31rem;
  text-align: center;
  margin-top: 0.23rem;
}
.detail {
  margin: 0.64rem 0 0.77rem 0.57rem;
}
.detail li:nth-child(2) {
  margin: 0.1rem 0;
}
.bar {
  width: 4.09rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.bar div {
  width: 1.68rem;
}
.bar img {
  width: 1.62rem;
}
.bar div .text {
  margin-top: 0.33rem;
  font-size: 0.2rem;
  text-align: center;
}
.fa {
  margin-right: 0.15rem;
}
</style>
